<template>
  <div class="shopping">
    <div class="top-nav">
      <van-nav-bar title="购物车" right-text="删除" @click-right="del" />
    </div>
    <div class="card-list-wrapper">
      <div class="card-list" v-if="this.list.length !== 0">
        <van-checkbox-group v-model="result" ref="checkboxGroup">
          <div class="card-box" v-for="item in list" :key="item.id">
            <van-checkbox class="check" :name="item.id"></van-checkbox>
            <GoodsCard v-bind="item" :num="counterMap[item.id]" :nofly="true" />
          </div>
        </van-checkbox-group>
      </div>
      <div class="card-none" v-else>
        <img src="https://duyi-bucket.oss-cn-beijing.aliyuncs.com/img/shopping_bg.jpg" alt="">
      </div>
    </div>
    <van-submit-bar :price="allMoney" :button-text="`去结算（${totalNum}）`" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import GoodsCard from '@/components/GoodsCard';
import {Dialog, Toast} from 'vant';
import { mapMutations, mapState } from 'vuex';
export default {
  components: {
    GoodsCard,
  },
  data () {
    return {
      result: [],
      list: [],
      checked: false,
    }
  },
  computed: {
    ...mapState({
      counterMap: (state) => state.counterMap,
    }),
    allMoney () {
      const resArr = this.list.filter((item) => this.result.includes(item.id));
      return resArr.reduce((prev, next) => {
        const num = this.counterMap[next.id] || 0;
        return Math.round(num * next.price * 100) + prev;
      }, 0)
    },
    totalNum () {
      const resArr = this.list.filter((item) => this.result.includes(item.id));
      const res = resArr.reduce((prev, next) => prev + (this.counterMap[next.id] || 0), 0);
      return res;
    }
  },
  created () {
    this.getAllData();
  },
  watch: {
    result () {
      if (this.result.length === this.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    }
  },
  methods: {
    ...mapMutations(['storageChange']),
    async getAllData () {
      const result = Object.keys(this.counterMap);
      const res = await this.$api.getGoodsByIds(result.join());
      this.list = res.list;
    },
    async del () {
      if (this.result.length === 0) {
        Toast('你没有选中商品');
        return;
      }
      try {
        await Dialog.confirm({message: '您是否要删除已选中的商品'});
        this.result.forEach((id) => {
          this.storageChange({id, value: -Infinity});
          this.list = this.list.filter((item) => !this.result.includes(item.id));
        })
      } catch (error) {
        Toast('用户点击了取消');
      }
    },
    onSubmit () {},
    checkAll () {
      if (this.checked) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    }
  },
};
</script>

<style lang="less" scoped>
.shopping {
  background-color: #eee;
  min-height: 100vh;
  .top-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    .van-nav-bar {
      background: linear-gradient(to top,#ff6034,#f81d09);
    }
  }
  .card-list-wrapper {
    width: 100%;
    height: 521px;
    position: absolute;
    top: 46px;
    left: 0;
    overflow: auto;
  }
  .card-list-wrapper::-webkit-scrollbar {
    width: 0px;
    background-color: none;
  }
  .card-list {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
    box-sizing: border-box;
    padding: 10px 10px 100px 10px;
    background: #fff;
    .card-box {
      display: flex;
      justify-content: center;
      .check {
        flex-shrink: 0;
        margin-right: 10px;
      }
    }
  }
  .van-submit-bar {
    bottom: 50px;
  }
  .card-none {
    img {
      width: 100%;
    }
  }
}
</style>
